@import "../common/variables";
@import "../common/mixins";

.m-accordion {
  background-color: #fff;
}

.accordion-title {
  min-height: 1rem;
  display: flex;
  align-items: center;
  position: relative;
  user-select: none;
  padding: 0 .24rem;
  overflow: hidden;
  &:after {
    .bottom-line(@line-color);
  }
  > span {
    display: block;
    flex: 1;
    font-size: .28rem;
    color: #444;
  }
  > i {
    overflow: hidden;
    &:after {
      content: '';
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 7px solid #A0A0A0;
      display: block;
      transition: transform .25s cubic-bezier(0.4, 0.6, 0.2, 1);
      transform: rotate(0deg);
    }
    &.accordion-rotated:after {
      transform: rotate(-180deg);
    }
  }
}

.accordion-content {
  position: relative;
  overflow: hidden;
  transition: height .25s cubic-bezier(0.4, 0.6, 0.2, 1);
  &:after {
    .bottom-line(@line-color);
  }
}
